<template>
  <div id="app">
    <div class="topbar" v-if="$route.name !== 'login' && $route.name !== 'task-detail' && $route.name !== 'simulation-paper'">
      <div class="logo"> <img :src="navbar_logo" height="100%" /> </div>
      <div class="menu">
        <div
          class="menu-item"
          :class="{ 'is-active': isActive === item.name }"
          v-for="item in linkList"
          :key="item.name"
          @click.stop="handleToPage(item.name)"
          >{{ item.label }}</div
        >
      </div>
      <div class="dropdrow-box">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            您好 {{ name }}
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block;">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
  import navbar_logo from '@/assets/navbar_logo.png'
  import { mapGetters } from 'vuex'
  import { getUserLoginStatus, getAuthUrl } from '@/api/user'
  export default {
    name: 'App',
    data() {
      return {
        navbar_logo,
        linkList: [
          {
            name: 'readingCenter',
            label: '阅片中心'
          },
          {
            name: 'learningCenter',
            label: '病理学习中心'
          },
          {
            name: 'teachingCenter',
            label: '病理教学中心'
          },
          {
            name: 'feedback',
            label: '意见反馈'
          }
        ],
        isActive: 'label'
      }
    },
    computed: {
      ...mapGetters(['sidebar', 'avatar', 'name'])
    },
    watch: {
      $route: {
        immediate: true,
        handler(newVal) {
          console.log(newVal)
          const { fullPath } = newVal
          this.linkList.forEach((item) => {
            const name = item
            if (fullPath.toLowerCase().indexOf(name) > -1) {
              this.isActive = name
            }
          })
        }
      }
    },
    created() {
      // this._getUserLoginStatus()
      // this._getAuthUrl()
    },
    mounted(){
      console.log(this.$route.name,'route');
    },
    methods: {
      handleToPage(name) {
        this.$router.push({ name })
        // this.$router.push(`/readingCenter`)
        this.isActive = name
      },
      async _getUserLoginStatus() {
        const res = await getUserLoginStatus()
        console.log(res)
      },
      async _getAuthUrl() {
        const res = await getAuthUrl()
        console.log(res)
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .topbar {
    height: 50px;
    background-color: #007aeb;
    display: flex;

    .logo {
      height: 100%;
      width: 220px;
      padding: 10px;
    }
    .menu {
      height: 100%;
      line-height: 50px;
      box-sizing: border-box;
      padding-top: 10px;
      &-item {
        display: inline-block;
        padding: 0 15px;
        line-height: 30px;
        height: 50px;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
          'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        border-radius: 4px;
        &:not(:first-child) {
          margin-left: 5px;
        }
        &:hover,
        &.is-active {
          background-color: #fff;
          color: #007aeb;
        }
      }
    }
    .dropdrow-box {
      flex: 1;
      text-align: end;
      height: 100%;
      line-height: 50px;
      cursor: pointer;
      &:focus {
        outline: none;
      }
      .avatar-wrapper {
        color: #fff;
      }
    }
  }
</style>
